<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale = 1.0,maximum-scale= 1,minimum-scale = 1"
	/>
	<title>有格调</title>
	<link rel="shortcut icon" type="image/x-icon" href="./images/3.png" />
	<link rel="stylesheet" type="text/css" href="./css/reset.css" />
	<link rel="stylesheet" type="text/css" href="./css/public.css" />
	<link rel="stylesheet" type="text/css" href="./css/index.css" />
	<link rel="stylesheet" type="text/css" href="./css/animate.css" />
	<link rel="stylesheet" type="text/css" href="./font-awesome/css/font-awesome.min.css" />
</head>

<body>

	<div class="wrapper">
		<header class="top-nav">
			<div class="container">
				<div class="fl top-nav-logo">
					<a href="#"></a>
				</div>
				<div class="fr top-nav-search">
					<button class="btn-search">
						<i class="fa fa-search"></i>
					</button>
				</div>
				<div class="top-nav-menu">
					<ul>
						<li>
							<a href="#">首页</a>
						</li>
						<li>
							<a href="#">阅读</a>
						</li>
						<li>
							<a href="#">音乐</a>
						</li>
						<li>
							<a href="#">视频</a>
						</li>
						<li>
							<a href="#">软件</a>
						</li>
						<li>
							<a href="#">电台</a>
						</li>
						<li>
							<a href="#">图片</a>
						</li>
						<li>
							<a href="#">专题推荐</a>
						</li>
						<li>
							<a href="#">随机推荐</a>
						</li>
					</ul>
				</div>
			</div>
		</header>

		<section class="recommend">
			<div class="container">
				<div class="con">
					<ul class="clearfix">
						<li class="fl item first no-padding">
							<a href="#">
								<div>
									<h2>英剧推荐:荒诞的黑色幽默《The End of The Fucking World(去他妈的世界)》提供下载</h2>
									<p class="date">
										<span class="video">视频</span>
										<span class="time">2018-06-17</span>
										<span class="comment">
											<i class="fa fa-comment-o"></i> 3
										</span>
										<span class="like">
											<i class="fa fa-heart-o"></i> 4
										</span>
									</p>
								</div>
							</a>
						</li>
						<li class="fl item">
							<a href="#">
								<div>
									<h2>音乐推荐:率性潇洒的《快意江湖》胡彦斌/韩雪</h2>
									<p class="date">
										<span class="video">视频</span>
										<span class="time">2018-06-17</span>
										<span class="comment">
											<i class="fa fa-comment-o"></i> 3
										</span>
										<span class="like">
											<i class="fa fa-heart-o"></i> 4
										</span>
									</p>
								</div>
							</a>
						</li>
						<li class="fl item no-padding">
							<a href="#">
								<div>
									<h2>电影推荐:燕赵多慷慨悲歌之士《英雄》(剧情分析)</h2>
									<p class="date">
										<span class="video">视频</span>
										<span class="time">2018-06-17</span>
										<span class="comment">
											<i class="fa fa-comment-o"></i> 3
										</span>
										<span class="like">
											<i class="fa fa-heart-o"></i> 4
										</span>
									</p>
								</div>
							</a>
						</li>
						<li class="fl item">
							<a href="#">
								<div>
									<h2>视频推荐:场景与情节并重的灾难电影《后天(The Day After Tomorrow)》</h2>
									<p class="date">
										<span class="video">视频</span>
										<span class="time">2018-06-17</span>
										<span class="comment">
											<i class="fa fa-comment-o"></i> 3
										</span>
										<span class="like">
											<i class="fa fa-heart-o"></i> 4
										</span>
									</p>
								</div>
							</a>
						</li>
						<li class="fl item no-padding">
							<a href="#">
								<div>
									<h2>音乐推荐:一首不过时的老歌《超时空爱情》胡彦斌</h2>
									<p class="date">
										<span class="video">视频</span>
										<span class="time">2018-06-17</span>
										<span class="comment">
											<i class="fa fa-comment-o"></i> 3
										</span>
										<span class="like">
											<i class="fa fa-heart-o"></i> 4
										</span>
									</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</section>

		<section class="main">
			<div class="container">
				<nav class="main-nav">
					<ul>
						<li>
							<a href="#">最新</a>
						</li>
						<li>
							<a href="#">阅读</a>
						</li>
						<li>
							<a href="#">音乐</a>
						</li>
						<li>
							<a href="#">视频</a>
						</li>
						<li>
							<a href="#">电台</a>
						</li>
						<li>
							<a href="#">软件</a>
						</li>
					</ul>
				</nav>
				<div class="clearfix con">
					<ul>
						<li class="fl">
							<a href="#">
								<img src="./images/9.jpg" />
							</a>
							<div class="des">
								<div class="categories">
									<span>阅读</span>
								</div>
								<div class="title">
									<h2>
										<a href="#">阅读推荐:没有一滴雨会认为自己造成了洪灾《恶之平庸》刘瑜</a>
									</h2>
								</div>
								<div class="desc">
									<p>阅读推荐 刘瑜的”恶之平庸”指的是一种无意识的、没有 ...
									</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<a href="#">
								<img src="./images/10.jpg" />
							</a>
							<div class="des">
								<div class="categories">
									<span>阅读</span>
								</div>
								<div class="title">
									<h2>
										<a href="#">阅读推荐:没有一滴雨会认为自己造成了洪灾《恶之平庸》刘瑜</a>
									</h2>
								</div>
								<div class="desc">
									<p>阅读推荐 刘瑜的”恶之平庸”指的是一种无意识的、没有 ...
									</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<a href="#">
								<img src="./images/11.jpg" />
							</a>
							<div class="des">
								<div class="categories">
									<span>阅读</span>
								</div>
								<div class="title">
									<h2>
										<a href="#">阅读推荐:没有一滴雨会认为自己造成了洪灾《恶之平庸》刘瑜</a>
									</h2>
								</div>
								<div class="desc">
									<p>阅读推荐 刘瑜的”恶之平庸”指的是一种无意识的、没有 ...
									</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<a href="#">
								<img src="./images/12.jpg" />
							</a>
							<div class="des">
								<div class="categories">
									<span>阅读</span>
								</div>
								<div class="title">
									<h2>
										<a href="#">阅读推荐:没有一滴雨会认为自己造成了洪灾《恶之平庸》刘瑜</a>
									</h2>
								</div>
								<div class="desc">
									<p>阅读推荐 刘瑜的”恶之平庸”指的是一种无意识的、没有 ...
									</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<a href="#">
							</a>
							<div class="des">
								<div class="title">
									<h2>
										优质的短篇文章(在线阅读素材)
									</h2>
								</div>
							</div>
						</li>
						<li class="fl">
							<a href="#">
								<img src="./images/14.jpg" />
							</a>
							<div class="des">
								<div class="categories">
									<span>阅读</span>
								</div>
								<div class="title">
									<h2>
										<a href="#">阅读推荐:没有一滴雨会认为自己造成了洪灾《恶之平庸》刘瑜</a>
									</h2>
								</div>
								<div class="desc">
									<p>阅读推荐 刘瑜的”恶之平庸”指的是一种无意识的、没有 ...
									</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<a href="#">
								<img src="./images/15.jpg" />
							</a>
							<div class="des">
								<div class="categories">
									<span>阅读</span>
								</div>
								<div class="title">
									<h2>
										<a href="#">阅读推荐:没有一滴雨会认为自己造成了洪灾《恶之平庸》刘瑜</a>
									</h2>
								</div>
								<div class="desc">
									<p>阅读推荐 刘瑜的”恶之平庸”指的是一种无意识的、没有 ...
									</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<a href="#">
								<img src="./images/16.jpg" />
							</a>
							<div class="des">
								<div class="categories">
									<span>阅读</span>
								</div>
								<div class="title">
									<h2>
										<a href="#">阅读推荐:没有一滴雨会认为自己造成了洪灾《恶之平庸》刘瑜</a>
									</h2>
								</div>
								<div class="desc">
									<p>阅读推荐 刘瑜的”恶之平庸”指的是一种无意识的、没有 ...
									</p>
								</div>
							</div>
						</li>
					</ul>
				</div>

				<div class="load-more">
					<button>加载更多</button>
				</div>
			</div>
		</section>

	</div>

</body>

</html>